<template>
	<view class="tab">
		<view class="trading-wrap">
			<view class="trading-buy">
				<view class="trading-now">买单</view>
				<view class="trading-buy-title">
					<view class="tbt-item">
						<view>数量</view>
						<text>(BHT)</text>
					</view>
					<view class="tbt-item">
						单价
						<text>(RMB)</text>
					</view>
					<view class="tbt-item">
						金额
						<text>(RMB)</text>
					</view>
				</view>
				<view class="trading-buy-list">
					<block v-for="(item, index) in buyList" :key="index">
						<view class="tbl-item">
							<view class="item">{{ item.nums }}</view>
							<view class="item">￥{{ item.price }}</view>
							<view class="item color6">￥{{ item.totalPrice }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="trading-sell">
				<view class="trading-now">卖单</view>
				<view class="trading-buy-title">
					<view class="tbt-item">
						<view>数量</view>
						<text>(BHT)</text>
					</view>
					<view class="tbt-item">
						单价
						<text>(RMB)</text>
					</view>
					<view class="tbt-item">
						金额
						<text>(RMB)</text>
					</view>
				</view>
				<view class="trading-sell-list">
					<block v-for="(item, index) in sellList" :key="index">
						<view class="tbl-item">
							<view class="item">{{ item.nums }}</view>
							<view class="item">￥{{ item.price }}</view>
							<view class="item color6">￥{{ item.totalPrice }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: '',
			buyList: [],
			sellList: [],
		};
	},
	onShow() {
		this.getBuyList();
	},
	methods: {
		getBuyList() {
			uni.showLoading({
				title: ''
			});
			this.$http.getBuyList({
					limit: 5
				}).then(res => {
				const data = res.data;
				uni.stopPullDownRefresh()
				if (data.success) {
					this.buyList = data.data;
					this.getSellList();
					return;
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		getSellList() {
			this.$http.getSellList({
					limit: 5
				}).then(res => {
				const data = res.data;
				if (data.success) {
					this.sellList = data.data;
					uni.hideLoading();
					return;
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
	},
	onPullDownRefresh() {
		this.getBuyList()
	}
};
</script>

<style scoped lang="scss">
.trading {
	padding-bottom: 140upx;
	&-buy,
	&-sell {
		&-title {
			display: flex;
			justify-content: space-around;
			padding: 20upx 0;
			background-color: #e9eaec;
			.tbt-item {
				display: flex;
			}
		}
		&-list {
			background-color: #ffffff;
			.tbl-item {
				display: flex;
				padding: 20upx 30upx;
				text-align: center;
				color: #1e1e1e;
				// background-color: #F1F1F3;
				border-bottom: 1px solid #e7e9f7;
				.buy-type,
				.sell-type {
					width: 120upx;
					color: #3e527e;
				}
				.sell-type {
					color: #1dd445;
				}
				.item {
					flex: 1;
				}
			}
		}
	}
	&-now {
		font-size: 36upx;
		font-weight: 500;
		padding: 20upx 20upx;
		text-align: left;
		background-color: #f1f1f3;
	}
}
</style>
